<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" aria-labelledby="createOrEditModal" class="modal fade" tabindex="-1"
    role="dialog" aria-hidden="true" [config]="{backdrop: 'static'}">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form #DevicesForm="ngForm" novalidate autocomplete="off">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span>{{l("detail")}}</span>
                    </h4>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')">
                        <i aria-hidden="true" class="ki ki-close"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row align-items-center">
                        <!--<Primeng-Datatable-Start>-->
                        <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                            <!-- resizableColumns="primengTableHelper.resizableColumns" -->
                            <p-table #dataTable (onLazyLoad)="getApplyFormDetail($event)" [value]="primengTableHelper.records" [rows]="primengTableHelper.defaultRecordsCountPerPage"
                                [paginator]="false" [lazy]="false" [resizableColumns]="primengTableHelper.resizableColumns" [responsive]="primengTableHelper.isResponsive">
                                <ng-template pTemplate="header">
                                    <tr>
                                        <th style="width:5%">{{l('RecordId')}}</th>
                                        <th>{{l('Name')}}</th>
                                        <th>{{l('Mac')}}</th>
                                        <th>{{l('IP')}}</th>
                                        <th>{{l('os')}}</th>
                                        <th>{{l('resolution')}}</th>
                                        <th>
                                            {{l('reviewStatus')}}
                                        </th>
                                        <th>
                                            {{l('RunningStatus')}}
                                        </th>
                                        <th pSortableColumn="heartBeatTime">{{l('HeartBeatTime')}}
                                            <p-sortIcon field="heartBeatTime"></p-sortIcon>
                                        </th>
                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="body" let-record let-i="rowIndex">
                                    <tr>
                                        <td>{{transIndex(i)}}</td>
                                        <td>
                                            <span>{{record.name}}</span>
                                        </td>
                                        <td>{{record.mac}}</td>
                                        <td>
                                            {{record.IP}}
                                        </td>
                                        <td>
                                            {{record.os}}
                                        </td>
                                        <td>{{(record['resolution_Width']||0 )+ ' * '+ (record['resolution_Height']||0)}}</td>
                                        <td>
                                            <span *ngIf="record['auditStatus']==1" class="kt-badge  kt-badge--success kt-badge--inline">{{l("On")}}</span>
                                            <span *ngIf="record['auditStatus']==0" class="kt-badge  kt-badge--danger kt-badge--inline">{{l("Off")}}</span>
                                        </td>
                                        <td>
                                            <span *ngIf="record['status']==1" class="kt-badge  kt-badge--success kt-badge--inline">{{l("deviceOpen")}}</span>
                                            <span *ngIf="record['status']==0" class="kt-badge  kt-badge--danger kt-badge--inline">{{l("deviceClose")}}</span>
                                        </td>
                                        <td>{{record.heartBeatTime| date : "yyyy/MM/dd HH:mm:ss"}}</td>
                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="emptymessage" let-records>
                                    <tr *ngIf="primengTableHelper.records">
                                        <td colspan="9" class="text-center">
                                            <img class="emptymessage" src="/assets/common/images/placeholder/deviceHolder.png" />
                                        </td>
                                    </tr>
                                </ng-template>
                            </p-table>
                            <div class="primeng-paging-container">
                                <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator (onPageChange)="getApplyFormDetail($event)"
                                    [totalRecords]="primengTableHelper.totalRecordsCount" [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                                </p-paginator>
                                <span class="total-records-count">
                                    {{l('TotalRecordsCount', primengTableHelper.totalRecordsCount)}}
                                </span>
                            </div>
                        </div>
                        <!--<Primeng-Datatable-End>-->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" (click)="close()">{{l("Cancel")}}</button>
                </div>
            </form>
        </div>
    </div>
</div>
